<template>
  <div>
    <el-row>
      <el-col :span="5" class="normal">
        <div class="icon-box">
          <i :class="formdata.icon" :style="iconStyle(formdata.iconColor)"></i>
        </div>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-col>
            <el-link v-if="$store.getters.language === 'en'" :underline="false" type="primary" class="text-title">{{
              formdata.enName
            }}</el-link>
            <el-link v-else :underline="false" type="primary" class="text-title">{{ formdata.chName }}</el-link>
            <el-tag class="ml10" :type="appStatus.color[formdata.status]" size="mini">{{
              appStatus.text[formdata.status]
            }}</el-tag>
            <el-tag class="ml10" type="primary" size="mini">{{ formdata.version }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="item-label">{{ $t('label.platformType2') }}</span>
            <span class="item-text">{{ types(formdata.platformType) }}</span>
          </el-col>
          <el-col :span="12"
            ><span class="item-label">{{ $t('label.typeId2') }}</span
            ><span class="item-text">{{ formdata.type }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><span class="item-label">{{ $t('label.updatedBy2') }}</span
            ><span class="item-text">{{ formdata.updatedBy }}</span></el-col
          >
          <el-col :span="12"
            ><span class="item-label">{{ $t('label.updatedAt2') }}</span
            ><span class="item-text">{{ formdata.updatedAt }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col
            ><span class="item-label">{{ $t('label.description2') }}</span
            ><span class="item-text">{{ formdata.description }}</span></el-col
          >
        </el-row>
      </el-col>
    </el-row>
    <div class="pachytene"></div>
    <el-row v-if="formdata.platformType === 1 || formdata.platformType === 2" class="border-bottom-dashed">
      <el-col
        ><span class="item-label">{{ $t('label.urlPc2') }}</span
        ><span class="item-text">{{ formdata.urlPc }}</span>
        <el-link
          v-if="formdata.urlPc.length > 0"
          :underline="false"
          type="primary"
          class="pull-right copyUrlPc"
          :data-clipboard-text="formdata.urlPc"
          @click="copy('copyUrlPc')"
          >{{ $t('btnText.copy') }}</el-link
        ></el-col
      >
    </el-row>
    <el-row v-if="formdata.platformType === 1 || formdata.platformType === 3" class="border-bottom-dashed">
      <el-col
        ><span class="item-label">{{ $t('label.urlApp2') }}</span
        ><span class="item-text">{{ formdata.urlApp }}</span>
        <el-link
          v-if="formdata.urlApp.length > 0"
          :underline="false"
          type="primary"
          class="pull-right copyUrlApp"
          :data-clipboard-text="formdata.urlApp"
          @click="copy('copyUrlApp')"
          >{{ $t('btnText.copy') }}</el-link
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col
        ><span class="item-label">{{ $t('label.meteringJson2') }}</span
        ><span class="item-text">{{ formdata.meteringJson }}</span></el-col
      >
    </el-row>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  name: 'basicInfo',
  props: {
    formdata: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    iconStyle(color) {
      return 'color:' + color;
    },
    copy(c) {
      let clipboard = new Clipboard('.' + c);
      clipboard.on('success', e => {
        this.$message.success(this.$t('label.copy'));
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 释放内存
        clipboard.destroy();
      });
    },
    types(platformType) {
      return this.$t('appTypes[' + platformType + ']');
    }
  },
  computed: {
    appStatus() {
      return { color: { 1: 'info', 2: 'success', 3: 'warning' }, text: this.$t('appStatus') };
    }
  }
};
</script>

<style lang="scss" scoped>
.icon-box {
  margin: 10px auto;
  width: 84px;
  height: 84px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
}
.icon-box > i {
  font-size: 44px;
  line-height: 44px;
}
.el-col {
  padding: 8px 20px;
}
.el-col:not(.normal) {
  line-height: 18px;
}
.border-bottom-dashed {
  border-bottom: 1px dashed #ebeef5;
}
.text-title {
  font-size: 18px;
  line-height: 24px;
}
.ml10 {
  margin-left: 10px;
}
.item-label {
  color: #909399;
}
.item-text {
  padding-left: 10px;
}
.pachytene {
  height: 6px;
  background: #f2f6fc;
  margin-bottom: 20px;
}
.pull-right {
  float: right;
}
</style>
